<!DOCTYPE html>
<link rel="match" href="reference/nested-boxes-with-hidden-overflow-and-border-radius-ref.html" />
<style>
    .outer {
        overflow: hidden;
        border-radius: 100px;
        background-color: magenta;
        width: 500px;
        height: 500px;
    }

    .middle {
        overflow: hidden;
        border-radius: 50px;
        transform: translate(10px, 10px);
        background-color: lawngreen;
    }

    .inner {
        width: 100px;
        height: 100px;
        background-color: black;
        transform: translate(10px, 10px);
    }
</style>
<div class="outer">
    <div class="middle">
        <div class="inner"></div>
    </div>
</div>
